﻿<!-- saved from url=(0014)about:internet -->
<html>
<head>
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=9">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../../js/jKinect.js"></script>
    <script type="text/javascript">
        var canvas;
        var context;
        function trackHeadPosition(jointPosition) {
            var divId = "#Div" + parseInt(jointPosition.Z * 1.7 - 0.8);
            $("div.text").not(divId).hide();
            $("body").css("font-size", 14 * 2 * (jointPosition.Z + 1));
            $(divId).show();
        }
        function drawSkeleton(jointsPosition) {
            if (context.clearRect == undefined) return;
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.lineWidth = "3";
            context.strokeStyle = "gray";
            for (var startJoint in jKinect.SKELETON_ARRAY) {
                for (var endJoint in jKinect.SKELETON_ARRAY[startJoint]) {
                    context.beginPath();
                    context.moveTo(canvas.width * jointsPosition[startJoint].X, canvas.width * jointsPosition[startJoint].Y);
                    context.lineTo(
                        canvas.width * jointsPosition[jKinect.SKELETON_ARRAY[startJoint][endJoint]].X,
                        canvas.width * jointsPosition[jKinect.SKELETON_ARRAY[startJoint][endJoint]].Y);
                    context.stroke();
                }
            }
            for (var joint in jointsPosition) {
                context.fillStyle = "green";
                context.beginPath();
                var diam = Math.max(16.0 - 7* jointsPosition[joint].Z, 3);
                context.arc(
                    canvas.width * jointsPosition[joint].X - 0.0 * diam,
                    canvas.width * jointsPosition[joint].Y - 0.0 * diam,
                    diam,
                    0.0, 2.0 * Math.PI,
                    false);
                context.closePath();
                context.fill();
            }
        }
        function defaultState() {
            $("div.text").hide();
            $("body").css("font-size", 14 * 2 * 5);
            $("#Div5").show();
        }
        function OnKinectReady() {
            jKinect.bind("SkeletonFrameReadyScaled", drawSkeleton);
            jKinect.bind("HeadPosition", trackHeadPosition);
            jKinect.bind("PlayerStatus", function (status) {
                if (status.PlayersCount == 0)
                    defaultState();
            });
            setInterval("jKinect.getNextSkeletonFrame()", 50);
        }

        $().ready(function () {
            defaultState();
            canvas = document.getElementById("skeleton");
            context = canvas.getContext("2d");
            jKinect.initKinect(true, false, undefined, OnKinectReady);
        });

    </script>
</head>
<body style="font-size: 140px; text-align: center">
    <canvas id="skeleton" width="500" height="500" style="position:absolute;">
    </canvas>
    <div id="Div0" class="text">
        I am demonstrating how you can deliver a quality experience to your users no matter
        how close (or far) they are.</div>
    <div id="Div1" class="text">
        My design is based on your action
    </div>
    <div id="Div2" class="text">
        I am a responsive site</div>
    <div id="Div3" class="text">
        Come closer please</div>
    <div id="Div4" class="text">
        Come here</div>
    <div id="Div5" class="text">
        HELLO</div>
</body>
</html>
